<template>
  <div class="institution-container">
    <div class="institution-info">
      <div class="info-item">
        <span class="label">机构ID：</span>
        <span>{{ institutionData.institutionId }}</span>
      </div>
      <div class="info-item">
        <span class="label">机构名称：</span>
        <span>{{ institutionData.institutionName }}</span>
      </div>
      <div class="info-item">
        <span class="label">地址：</span>
        <span>{{ institutionData.address }}</span>
      </div>
      <div class="info-item">
        <span class="label">联系电话：</span>
        <span>{{ institutionData.contactPhone }}</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue"
import { useRoute } from "vue-router"
import { queryById } from "@/api/medicalInstitutions"

interface InstitutionData {
  institutionId: number;
  institutionName: string;
  address: string;
  contactPhone: string;
}

const institutionData = ref<InstitutionData>({
  institutionId: 0,
  institutionName: "",
  address: "",
  contactPhone: ""
})

const route = useRoute()

const loadInstitutionData = async () => {
  try {
    const institutionId = Number(route.params.id)
    const response = await queryById(institutionId)
    institutionData.value = response.data
  } catch (error) {
    console.error('获取机构数据失败:', error)
  }
}

onMounted(() => {
  loadInstitutionData()
})
</script>

<style lang="scss" scoped>
.institution-container {
  padding: 20px;

  .institution-info {
    .info-item {
      margin-bottom: 15px;

      .label {
        font-weight: bold;
        margin-right: 10px;
      }
    }
  }
}
</style>
